<template>
  <div class="customerMgtList">
    <div class="header-top">
      <div class="head-title">
        客户管理
      </div>
      <changeEnterprise v-model="enterpriseValue"></changeEnterprise>
    </div>
    <div class="content-big">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="130px">
        <el-form-item :prop="item.key" v-for="(item,index) in formObj" :key="index">
          <el-input v-if="item.type==`input`" v-model="queryParams[item.key]" :placeholder="item.label" clearable style="width: 240px" @keyup.enter.native="handleQuery" suffix-icon="el-icon-search"/>
          <div class="right-big" v-else-if="item.type==`select`">
            <span>{{ item.label }}:</span>
            <el-select
              v-model="queryParams[item.key]"
              @change="handleQuery"
              placeholder="请选择"
            >
              <el-option
                v-for="sitem in item.optionList"
                :key="sitem.id"
                :label="sitem.name"
                :value="sitem.id"
              >
              </el-option>
            </el-select>
          </div>
          <div class="right-big" v-else-if="item.type==`time`">
            <span>{{ item.label }}:</span>
            <el-date-picker
              v-model="queryParams[item.key]"
              :value-format="item.format"
              :type="item.dateType?item.dateType:`date`"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              @change="handleQuery"
            ></el-date-picker>
          </div>
          <div class="right-big" v-else-if="item.type==`weChatSelect`">
            <span>{{ item.label }}:</span>
            <WeChat
              :options="options"
              @getValue="getValue"
              inputWidth="220px"
              :placeholder="`全部企微号`"
            ></WeChat>
          </div>
          <div class="right-big" v-else-if="item.type==`label`" @click.stop="showLabel" style="position: relative; z-index:1">
            <span>{{ item.label }}:</span>
            <el-input style="position: relative; z-index: -1;" v-model="queryParams[item.key]" placeholder="请选择" clearable @keyup.enter.native="handleQuery" disabled suffix-icon="el-icon-arrow-down"/>
          </div>
        </el-form-item>

        <ul class="condition" v-if="isCondition">
          <span>已选条件：</span>
          <li v-for="(item,index) in formObj" :key="index" v-if="item.type !='time'&& queryParams[item.key] || (item.type=='time'&& queryParams[item.key] &&  queryParams[item.key].length>0)">
            <template v-if="item.type=='time'">
              {{ item.label }}：{{ queryParams[item.key][0] }}~{{ queryParams[item.key][1] }}
            </template>
            <template v-else-if="item.type=='select'">
              {{ item.label }}： {{ queryParams[item.key] |fiterSelect(item.optionList) }}
            </template>
            <template v-else>
              {{ item.label }}： {{ queryParams[item.key] }}
            </template>

            <i class="el-icon-close" @click="delItem(item.key,item.type)"></i>
          </li>
          <div class="reSet" @click="resetQuery">重置条件</div>
        </ul>
      </el-form>

      <div class="content-tabel">
        <div class="content-head">
          <div class="content-left">
            <div class="left-title">我的客户</div>
            <div class="left-number">共有：13个客户（去重后12）</div>
          </div>
          <div class="content-right">
            <div class="example">自动记录手机号
              <el-switch
                v-model="value"
                active-color="#5993ff"
              >
              </el-switch>
              <div class="example-content" @click="getExample">示例</div>
            </div>
            <div class="group-btn">
              <el-button size="small" @click="handleExport" v-hasPermi="['customerMgtList:export']">导出数据</el-button>
              <el-button size="small" @click="handleCustom" v-hasPermi="['customerMgtList:custom']">自定义表格</el-button>
            </div>
          </div>
        </div>
        <el-table
          :data="tableDataList"
          ref="customerMgtList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            :label="item.label"
            align="center"
            v-for="(item, index) in tableColumns"
            :key="index"
            :prop="item.key"
            :min-width="item.minWidth ? item.minWidth : ``"
            :fixed="item.fixed ? item.fixed : false"
            :show-overflow-tooltip="true"
          >
            <!--用于表格自定义-->
            <template slot-scope="scope">
              <div v-if="item.key=='name'">
                <div class="userInfo">
                  <img src="../../../assets/images/profile.jpg"/>
                  <div class="name">小城红</div>
                  <div class="label">@志新</div>
                </div>
              </div>
              <div class="group-btn" v-else-if="item.key =='operate'">
                <el-button type="text" @click="handleView(scope.row)" v-hasPermi="['customerMgtList:view']">详情</el-button>
                <el-button type="text" v-hasPermi="['customerMgtList:chart']">对话</el-button>
                <el-button type="text" v-hasPermi="['customerMgtList:crowd']">在群</el-button>
                <el-button type="text" v-hasPermi="['customerMgtList:del']">删除</el-button>
                <el-button type="text" v-hasPermi="['customerMgtList:blacklist']">黑名单</el-button>
              </div>
              <div v-else>{{ scope.row[item.key] }}</div>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          @pagination="getList"
        />
      </div>
      <div class="table-footer">
        <div class="footer-left">
          <div class="chooseAll">选择全部</div>
          已选<span>13</span>个
        </div>
        <div class="footer-right">
          <el-dropdown>
            <el-button type="primary" size="small" v-hasPermi="['customerMgtList:batchSet']">
              批量管理标签<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="handerTableLabel">打开企微标签</el-dropdown-item>
              <el-dropdown-item @click.native="handleNumberDelete">删企微标签</el-dropdown-item>
              <el-dropdown-item @click.native="handleSelectSmartTags">打开智能标签</el-dropdown-item>
              <el-dropdown-item @click.native="handleNumberDelete">删智能标签</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button type="primary" size="small" plain v-hasPermi="['customerMgtList:batchMsg']" @click="handerBatchRemarks">批量备注</el-button>
        </div>
      </div>
    </div>
    <!--    导出的弹窗-->
    <exportPage v-if="showExportPage" :visableIf.sync="showExportPage"></exportPage>
    <!--    自定义列表弹窗-->
    <customListPage v-if="showCustomListPage" :visableIf.sync="showCustomListPage"></customListPage>
    <!--    搜索选择标签-->
    <selectLabelPage v-if="showSelectLabelPage" :visableIf.sync="showSelectLabelPage"></selectLabelPage>
    <!--    打开企微标签-->
    <tableLabel v-if="showTableLabel" :visableIf.sync="showTableLabel"></tableLabel>
    <!-- 智能标签-->
    <selectSmartTags v-if="showSelectSmartTags" :visableIf.sync="showSelectSmartTags"></selectSmartTags>
<!--    示例弹窗-->
    <example v-if="showExample" :visableIf.sync="showExample"></example>
    <batchRemarks v-if="showBatchRemarks" :visableIf.sync="showBatchRemarks"></batchRemarks>
  </div>
</template>

<script>
import {listUser, delUser,} from "@/api/system/user";
import WeChat from "@/views/components/WeChat.vue";

export default {
  name: "customerMgtList",
  components: {
    WeChat,
    'exportPage': () => import('./exportPage.vue'),//导出弹窗
    'customListPage': () => import('./customListPage.vue'),//自定义列表弹窗
    'selectLabelPage': () => import('./selectLabelPage.vue'),//自定义列表弹窗
    'tableLabel': () => import('./tableLabel.vue'),//打开企微标签
    'selectSmartTags': () => import('./selectSmartTags.vue'),//打开企微标签
    'example': () => import('./example.vue'),//示例
    'batchRemarks': () => import('./batchRemarks.vue'),//批量备注
    'changeEnterprise':()=> import('@/views/components/changeEnterprise.vue')
  },
  data() {
    let WeChatList = [
      //所属企微号
      {id: 1, name: "技术部"},
      {id: 2, name: "人事部"},
    ];
    let sexList = [
      //性别
      {id: 1, name: "男"},
      {id: 2, name: "女"},
    ];
    let callList = [
      //称呼
      {id: 1, name: "有"},
      {id: 2, name: "无"},
    ];
    let blackList = [
      //黑白名单
      {id: 1, name: "是"},
      {id: 2, name: "否"},
    ];
    let weChatTypeList = [
      //微信类型
      {id: 1, name: "个人"},
      {id: 2, name: "企业"},
    ];
    let sourceList = [
      //客户来源
      {id: 1, name: "未知来源"},
      {id: 2, name: "扫一扫"},
      {id: 3, name: "手机搜索"},
      {id: 4, name: "名片"},
      {id: 5, name: "群聊添加"},
    ];
    let relationshipList = [
      //好友关系
      {id: 1, name: "正常好友"},
      {id: 2, name: "未验证好友"},
      {id: 3, name: "拉黑好友"},
      {id: 4, name: "流失好友"},
    ];
    let groupingList = [
      //企微号分组
      {id: 1, name: "未分组"},
      {id: 2, name: "技术组"},
      {id: 3, name: "调研组"},
    ];
    let remarkList = [
      //企微号分组
      {id: 1, name: "是"},
      {id: 2, name: "否"},

    ];
    return {
      enterpriseValue:1,//获取企业的值
      enterpriseList:[
        {value:1,label:'锐行'},
        {value:2,label:'志新'},
      ],
      showExample: false,//示例
      showExportPage: false,//导出
      showCustomListPage: false,//自定义列表的弹窗
      showSelectLabelPage: false,
      showBatchRemarks:false,
      showTableLabel: false,//打开企微标签
      multipleSelection: [],//表格多选
      showSelectSmartTags: false,//智能标签
      tableHeight: 600,

      tableColumns: [
        {key: 'name', label: `客户`, visible: true, minWidth: 150, fixed: true},
        {key: 'mobile', label: `性别`, visible: true, minWidth: 150, fixed: false},
        {key: 'email', label: `称呼`, visible: true, minWidth: 200},
        {key: 'last_login_time', label: `所属企微号`, visible: true, minWidth: 200},
        {key: 'create_time', label: `添加时间`, visible: true, minWidth: 200},
        {key: 'check_payCreate_time', label: `企微标签`, visible: true, minWidth: 200},
        {key: 'check_payStatus_name', label: `智能标签`, visible: true, minWidth: 150},
        {key: 'account_infoStatus_name', label: `客户最后发言`, visible: true, minWidth: 150},
        {key: 'all_num', label: `客户来源`, visible: true, minWidth: 150},
        {key: 'open_num', label: `好友关系`, visible: true, minWidth: 150},
        {key: 'check_num', label: `流失时间`, visible: true, minWidth: 150},
        {key: 'waiting_coin', label: `员工最后发言`, visible: true, minWidth: 150},
        {key: 'operate', label: `操作`, visible: true, minWidth: 250, fixed: 'right',},
      ],
      tableDataList: [],
      total: 8, // 表格的总条数
      dateRange1: [],
      dateRange2: [],
      dateRange3: [],
      groupingList: [
        //企微号分组
        {id: 1, name: "未分组"},
        {id: 2, name: "技术组"},
        {id: 3, name: "调研组"},
      ],
      cities: [{
        value: '0',
        label: '志新'
      }, {
        value: '1',
        label: '锐行'
      }],
      value: '',
      isCondition: false,
      pageNum: 1,
      pageSize: 10,
      queryParams: {
        userName: '',//客户名称
        mobile: '',//手机号码
        grouping: null,//分组
        weChatAccount: null,//所属企微号
        isHasRemark: null,//是否有备注
        sex: null,//性别
        isCall: null,//有无称呼
        isBlack: null,//黑名单
        isWhite: null,//白名单
        weChatType: null,//微信类型
        weChatLabel: null,//企微标签
        personLabel: null,//个人标签
        source: null,//客户来源
        relationship: null,//好友关系
        missTime: [],//流失时间
        addTime: [],//添加时间
        speakTime: [],//发言时间
      },
      options: [{
        value: 1,
        label: '小红',
        WeChatNum: 2,
        WeChatName: '智行',
      }, {
        value: 2,
        label: '小军',
        WeChatNum: 1,
        WeChatName: '锐行',
      }, {
        value: 3,
        label: '小李',
        WeChatNum: 1,
        WeChatName: '锐行',
      }],
      formObj: [
        {type: 'input', key: 'userName', label: '客户名称',},
        {type: 'input', key: 'mobile', label: '手机号码',},
        {type: 'select', key: 'grouping', label: '企微号分组', optionList: groupingList},
        {type: 'weChatSelect', key: 'weChatAccount', label: '所属企微号',},
        {type: 'select', key: 'isHasRemark', label: '是否有备注', optionList: remarkList},
        {type: 'select', key: 'sex', label: '性别', optionList: sexList},
        {type: 'select', key: 'isCall', label: '有无称呼', optionList: callList},
        {type: 'select', key: 'isBlack', label: '黑名单', optionList: blackList},
        {type: 'select', key: 'isWhite', label: '白名单', optionList: blackList},
        {type: 'select', key: 'weChatType', label: '微信类型', optionList: weChatTypeList},
        {type: 'label', key: 'weChatLabel', label: '企微标签',},
        {type: 'label', key: 'personLabel', label: '个人标签',},
        {type: 'select', key: 'source', label: '客户来源', optionList: sourceList},
        {type: 'select', key: 'relationship', label: '好友关系', optionList: relationshipList},
        {type: 'time', key: 'missTime', label: '流失时间', dateType: 'datetimerange', format: 'yyyy-MM-dd HH:mm:ss',},
        {type: 'time', key: 'addTime', label: '添加时间', dateType: 'datetimerange', format: 'yyyy-MM-dd HH:mm:ss',},
        {type: 'time', key: 'speakTime', label: '客户最后发言', dateType: 'datetimerange', format: 'yyyy-MM-dd HH:mm:ss',},
      ],

    };
  },
  watch: {
    queryParams: {
      handler(newValue, oldValue) {
        console.log('监听整个对象', newValue);
        this.isCondition = false;
        for (let key in newValue) {
          if ((Array.isArray(newValue[key]) && newValue[key].length > 0) || (!Array.isArray(newValue[key]) && newValue[key])) {
            this.isCondition = true;

            return;
          }
        }
      },
      deep: true
    },
    enterpriseValue(val){
      console.log('选择企业',val);
    },
  },
  filters: {
    fiterSelect(val, list) {
      let name = '-';
      if (list && list.length > 0) {
        list.forEach(item => {
          if (val == item.id) {
            name = item.name;
          }
        })
      }
      return name;
    }
  },
  created() {
    this.getList();
    this.tableDataList = [];
    for (let i = 0; i < 10; i++) {
      let obj = {
        name: '小红',
        mobile: '18207418337',
        email: '2572513931@qq.com',
        last_login_time: '锐行科技',
        create_time: '2012-02-12',
        check_payCreate_time: '一般',
        check_payStatus_name: '核心',
        account_infoStatus_name: '2012-09-13',
        all_num: '微信',
        open_num: '一般',
        check_num: '2012-09-12',
        waiting_coin: '2012-08-23',
        operate: true,
      }
      this.tableDataList.push(obj);
    }
  },
  methods: {
    delItem(key, type) {
      if (type == 'time') {
        this.queryParams[key] = [];
      } else {
        this.queryParams[key] = null;
      }

    },
    handerBatchRemarks(){
      this.showBatchRemarks=true;
    },
    getValue(obj) {
      console.log('获取行', obj);
      this.queryParams.weChatAccount = obj.label;
    },
    showLabel() {
      console.log('点击额',);
      this.showSelectLabelPage = true;
    },
    getExample() {
      this.showExample = true;
    },
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      listUser().then(response => {
          this.userList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    /** 搜索按钮操作 */
    handleQuery() {
      console.log('this.queryParams', this.queryParams);
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
    },
    // 多选框选中数据
    handleSelectionChange(val) {
      this.multipleSelection = [];
      if (val && val.length > 0) {
        val.forEach((item) => {
          this.multipleSelection.push(item.id);
        })
        console.log('multipleSelection', this.multipleSelection);
      }
    },
    handleView(row) {
      console.log('');
      this.$router.push({
        path: '/customerOperationsMgt/customerMgt/viewCustomerDetails',
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      // const userIds = row.userId || this.ids;
      // this.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function () {
      //   return delUser(userIds);
      // }).then(() => {
      //   this.getList();
      //   this.$modal.msgSuccess("删除成功");
      // }).catch(() => {
      // });
      this.$msgBox.showMsgBox({
        title: "是否确认删除？",
        content: "该企微号正在执行服务，删除将会使该号从操作中释放，导致部分功能无法正常使用，请谨慎选择。*如该号已加入在线聊天，成功删除后，聊天记录会被一并删除，重新登录后无法恢复。",
      })
        .then(async (val) => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleNumberDelete() {
      // const userIds = row.userId || this.ids;
      // this.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function () {
      //   return delUser(userIds);
      // }).then(() => {
      //   this.getList();
      //   this.$modal.msgSuccess("删除成功");
      // }).catch(() => {
      // });
      this.$msgBox.showMsgBox({
        title: "是否确认删除？",
        content: "该企微号正在执行服务，删除将会使该号从操作中释放，导致部分功能无法正常使用，请谨慎选择。*如该号已加入在线聊天，成功删除后，聊天记录会被一并删除，重新登录后无法恢复。",
      })
        .then(async (val) => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    /** 导出按钮操作 */
    handleExport() {
      this.showExportPage = true;
    },
    handleCustom() {
      this.showCustomListPage = true;
    },
    handerTableLabel() {
      console.log('点击了打开标签');
      this.showTableLabel = true;
    },
    handleSelectSmartTags() {
      //打开智能标签
      this.showSelectSmartTags = true;
    },
  }
};
</script>
<style lang="scss" scoped>
.app-container {
  //background: #fff;
}

.header-top {
  height: 46px;
  background: #fff;
  border-bottom: 1px solid #e9e9e9;
  position: relative;
  top: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 20px;

  .head-title {
    margin-right: 15px;
    font-weight: bold;
  }

  .head-right {
    position: absolute;
    height: 100%;
    display: flex;
    justify-items: center;
    right: 30px;
    align-items: center;

    .el-button--medium {
      padding: 0px 12px !important;
      height: 32px;
      display: flex;
      justify-items: center;
      align-items: center;
    }
  }

  .divider {
    margin: 0 20px;
    width: 1px;
    height: 16px;
  }
}

.content-big {
  margin: 12px;
  height: calc(100vh - 180px);
  overflow-y: auto;

  .el-form {
    padding: 10px;
    background: #fff;
    border-radius: 8px;

    .el-form-item {
      margin-bottom: 10px;

      .right-big {
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        padding-left: 11px;
        position: relative;
        z-index: 1;
        cursor: pointer;
        height: 32px;
        overflow-y: hidden;
        line-height: 30px;

        ::v-deep .cumtom {
          .cumtom-list {
            padding-left: 85px;
            height: 28px;
            line-height: 28px;
          }

          .el-input__inner {
            border: none;
          }
        }

        > span {
          width: 89px;
          display: inline-block;
          white-space: nowrap;
          position: absolute;
          z-index: 7;
          color: rgba(0, 0, 0, .45);
        }

        ::v-deep .el-input--small .el-input__inner {
          line-height: 29px;
          height: 29px;
        }

        .el-select {
          width: 240px;

          ::v-deep .el-input__inner {
            border: none;
            padding-left: 85px;
            background: none;
          }
        }

        .el-input {
          width: 240px;

          ::v-deep .el-input__inner {
            border: none;
            padding-left: 85px;
            background: none;
          }
        }

        ::v-deep .el-date-editor {
          border: none;
          padding-left: 90px;

          .el-input__icon {
            display: none;
          }
        }
      }

    }
  }

  .content-tabel {
    background: #fff;
    margin-top: 10px;

    .content-head {
      height: 60px;
      display: flex;
      justify-content: space-between;
      padding: 16px;

      .content-left {
        display: flex;
        align-items: center;

        .left-number {
          font-size: 12px;
          color: rgba(0, 0, 0, .45);
          margin-left: 10px;
        }

        .group-btn {

        }
      }

      .content-right {
        display: flex;
        align-items: center;

        .example {
          font-size: 14px;
          display: flex;
          align-items: center;
          margin-right: 20px;

          .el-switch {
            margin-right: 10px;
            margin-left: 5px;
          }
        }
      }
    }

    .el-table {
      margin-bottom: 20px;
    }
  }

  .pagination-container {
    height: 60px;
  }
}

.table-footer {
  position: fixed;
  left: 226px;
  right: 0;
  bottom: 0;
  height: 56px;
  padding: 12px 16px;
  border-top: 1px solid #e9e9e9;
  background: #fff;
  z-index: 2;
  display: flex;
  justify-content: space-between;

  .footer-left {
    display: flex;
    align-items: center;

    .chooseAll {
      color: #5993ff;
      margin-right: 10px;
    }

    span {
      margin: 0px 10px;
      color: #5993ff;
    }
  }

  .footer-right {
    .el-dropdown {
      margin-right: 10px;

      .el-button--primary {
        border-radius: 4px;
        color: rgba(0, 0, 0, .65);
        border: 1px solid #e9e9e9;
        background: #fff;
      }
    }
  }
}

.userInfo {
  border-radius: 4px;
  margin: 8px 0;
  cursor: pointer;
  position: relative;
  padding-left: 50px;
  font-size: 14px;
  list-style: none;
  text-align: left;

  img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    left: 0px;
    top: 0px;
    position: absolute;
  }

  .label {
    margin-top: 2px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #f90;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.example-content {
  color: #2d8cf0;
  cursor: pointer;
}

.condition {
  background: #fff;
  padding: 10px 0px;
  border-top: 1px solid #eee;
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 0px;

  span {
    margin-left: 10px;
  }

  .reSet {
    color: #5993ff;
    cursor: pointer;
  }

  li {
    display: inline-flex;
    align-items: center;
    background: #ebf2ff;
    border-color: #ebf2ff;
    color: rgba(0, 0, 0, .85);
    padding: 4px 7px;
    font-size: 12px;
    margin-right: 10px;
    border-radius: 4px;
    margin-bottom: 10px;

    .el-icon-close {
      font-size: 16px;
      margin-left: 5px;
      cursor: pointer;
    }
  }
}

</style>
